<template>
  <button v-power-directive="'power-add'">增加</button>
  <button v-power-directive="'power-del'">删除</button>
  <button v-power-directive="'power-edit'">编辑</button>
  <button v-power-directive="'power-check'">查找</button>
</template>

<script setup lang="ts">
/**
 * 权限按钮案例 通过自定义指令简写
 */
import type { Directive, DirectiveBinding } from 'vue';
// 模拟存 token
localStorage.setItem('token', 'hyb');
// 获取 token
const userID = localStorage.getItem('token');

// mock 后台返回的用户权限数据
const permission = ['hyb:power-add', 'hyb:power-del', 'hyb:power-edit'];

// 编写自定义指令
const vPowerDirective: Directive<HTMLElement> = (el, bind: DirectiveBinding) => {
  // 根据用户权限数据 permission 判断按钮是否显示
  if (!permission.includes(userID + ':' + bind.value)) {
    el.style.display = 'none';
  }
};
</script>

<style lang="scss" scoped>
button {
  margin: 10px;
}
</style>
